<template>
    <div id="base">

        <top></top>
        <div id="banner">

            <div id="title">
                <span style="font-weight: 700;
                             font-style: normal;
                             font-size: 38px;
                             color: #FF8E0E;
                             text-align: center;">
                    产品推荐精选</span>

            </div>



            <div id="search">
                <div class="mt-4">
                    <el-input style="height: 57px;" v-model="input3" placeholder="输入关键词搜索" class="input-with-select">


                    </el-input>
                </div>


            </div>

        </div>

        <div style="width: 100%; height: 60px; background-color: white; margin-top: -10px;">

            <div id="menu">

                <el-menu style="width: 55%; height: 100%; margin-left: 25%;" default-active="1" class="el-menu-demo"
                    mode="horizontal" text-color="black" active-text-color="white" @select="handleSelect">
                    <el-menu-item index="1" class="menu_item">全部</el-menu-item>
                    <el-menu-item index="2" class="menu_item" @clack="">为自己</el-menu-item>
                    <el-menu-item index="3" class="menu_item">为爱宠</el-menu-item>
                    <el-menu-item index="4" class="menu_item">为家财</el-menu-item>
                    <el-menu-item index="5" class="menu_item">旅途无忧</el-menu-item>
                </el-menu>


            </div>

        </div>

        <div id="content">


            <div class="content_item" v-for="item in goodslist" :key="item">

                <div class="item_div_img">
                    <img src="../images/ProductRecommend/u379.png" alt="">
                </div>

                <div class="item_div_text">
                    <p class="title">{{ item.name }}</p>

                    <p class="introduce"><span>{{ item.describ }}</span></p>
                    <p class="introduce"><span>时间：{{ item.insurTime }}</span></p>

                    <p class="skip"><a @click="chankxq(item)">查看详情 &gt;</a>
                        <!-- <el-button type="warning" plain>立即投保</el-button> -->
                    </p>

                </div>

            </div>

            <!-- <div class="content_item">

                <div class="item_div_img">
                    <img src="../images/ProductRecommend/u379.png" alt="">
                </div>

                <div class="item_div_text">
                    <p class="title">出境超值旅游保险</p>

                    <p class="introduce"><span>意外医疗|最低日均1.8元|老人小孩皆可…</span></p>
                    <p class="introduce"><span>承保年龄：30天-100周岁</span></p>

                    <p class="skip"><a href="##">查看详情 &gt;</a><el-button type="warning" plain>立即投保</el-button></p>

                </div>

            </div> -->



        </div>

        <!-- 底部组件 -->
        <ButtonState></ButtonState>

    </div>



</template>

<script>

import ButtonState from "@/components/ButtonState.vue";
import top from "../components/TopNav.vue"
import http from "../http/request";
export default {
    name: 'UserAppProductRecommend',

    data() {
        return {
            goodslist:[],

        };
    },

    mounted() {

      http.get("goods/goods/allgoods").then((response) => {
            console.log(response.data);
            this.goodslist=response.data;
        })


    },

    methods: {
        //跳转页面
        chankxq(item) {            
            this.$router.push({        
                path: '/details',
                query: {
                    id: item.id
                 }
            });
        },
        // 商品列表展示
        // goodslist() {
        //     let that = this;
        //     let url = "http://localhost:8077/1";
        //     this.$global.get(url)
        //         .then((response => {
        //             console.log(response);
        //         }))
        // }

    },

    components: {
        top,
        ButtonState
    }
};
</script>

<style lang="css" scoped>
#content {

    width: 90%;
    height: 800px;
    margin-left: 5%;
    background-color: white;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;

}

.content_item {
    width: 45%;
    height: 22%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    border: 1px solid white;
    border-radius: 100px;
    box-shadow: rgb(207, 207, 196) 0px 5px 10px 0px;
    margin-left: 3%;
    margin-top: 5%;
    text-overflow: ellipsis;


}

.item_div_img {
    width: 30%;
    height: 100%;
    border: 1px solid white;
    border-radius: 50%;
    background-image: url("../images/ProductRecommend/u375.svg");

}

.item_div_img img {
    width: 100%;
    height: 100%;
}

.item_div_text {

    width: 68%;
    height: 100%;

    text-align: left;

}

.title {
    font-weight: 700;
    font-style: normal;
    color: #666666;
    font-size: 18px;
    font-family: "黑体 Bold", "黑体", sans-serif;
    margin-top: 20px;
    margin-left: 50px;
}

.introduce {
    font-family: "黑体", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    color: #666666;
    margin-top: 20px;
    margin-left: 50px;
}

.skip {

    font-family: "黑体", sans-serif;
    font-weight: 400;
    font-style: normal;

    margin-top: 20px;
    margin-left: 50px;
}

.skip a {

    color: #F89600;

}

.skip button {

    margin-left: 50px;
    background-color: #FFB916;
    color: white;
}

#banner {
    width: 100%;
    height: 300px;
    background-image: url("../images/ProductRecommend/u356.png");
    background-size: 100% 100%;
    border: 1px solid white;
}

#menu {

    width: 100%;
    height: 55px;

}

.menu_item {

    width: 144px;
    height: 44px;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
}

.menu_item.is-active {
    background-color: #FFB916 !important;

}

#search {

    width: 950px;
    height: 100px;
    margin-left: 300px;
    margin-top: 25px;
}

#title {

    margin-top: 50px;
    width: 250px;
    height: 50px;
    margin-left: 650px;
    margin-top: 100px;


}

#base {

    width: 1500px;
    height: 1300px;

    overflow: hidden;
    margin: 0 auto;

}
</style>